<!--test.vue-->
<template>
  <div style="width: 100%; height: 100%" ref="echartsBox">
    <v-chart ref="echarts" class="chart" :option="option" :key="key" />
  </div>
</template>

<script>
import { config } from "./data.js";
export default {
  name: "LineSimpleColumnar",
  props: {
    lineSimpleColumnarForm: {
      type: Object,
      default: () => {
        return config;
      }
    }
  },
  watch: {
    lineSimpleColumnarForm: {
      handler(val) {
        console.log("barOptions", val);
        this.option = val;
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      option: {},
      key: 1
    };
  },
  mounted() {
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let element = this.$refs["echartsBox"];
    this.observer = new MutationObserver(mutationList => {
      for (let mutation of mutationList) {
        console.log(mutation);
      }
      console.log("自适应");
      console.log(this);

      // this.$refs['echarts'].resize()
      this.key += 1;
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
      attributeOldValue: true
    });
  },
  beforeDestroyed() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer.takeRecords();
      this.observer = null;
    }
  }
};
</script>